import { Component, Vue } from 'vue-property-decorator'
import styles from './ApplyForm.less'
@Component({})
export default class ApplyForm extends Vue {
  private seal: any = {}

  get isPersonSealApply() {
    return this.$route.query.isPersonSealApply?.toString() === 'true'
  }

  protected render() {
    return (
      <div class={styles.printPage}>
        <div class={styles.pContainer}>
          <h1>浙江省机构电子印章申请表</h1>
          <table>
            <tr>
              <th colspan="6">申请单位信息</th>
            </tr>
            <tr>
              <td colspan="6">单位全称：{this.seal.organize}</td>
            </tr>
            <tr>
              <td colspan="2">机构类型：{this.seal.orgType}</td>
              <td colspan="2">证照类型：{this.seal.licenseType}</td>
              <td colspan="2">
                证照号码：{this.seal.licenseNumber}
                {this.seal.isUpdate && (
                  <p class="warn">统一信用代码已更新，请仔细核对</p>
                )}
              </td>
            </tr>
            <tr>
              <th colspan="6">经办人信息</th>
            </tr>
            <tr>
              <td colspan="3">姓名：{this.seal.agentName}</td>
              <td colspan="3">手机号码：{this.seal.agentMobile}</td>
            </tr>
            <tr>
              <td colspan="3">证件类型：{this.seal.agentLicenseType}</td>
              <td colspan="3">证件号码：{this.seal.agentLicenseNumber}</td>
            </tr>
            <tr>
              <th colspan="6">电子印章信息</th>
            </tr>
            <tr>
              <td colspan="6">印章名称：{this.seal.sealName}</td>
            </tr>
            <tr>
              <td colspan="6">印章类型：{this.seal.useType}</td>
            </tr>
            <tr>
              <th colspan="6">
                {this.isPersonSealApply
                  ? '电子名章印模'
                  : '请在本框正中位置加盖需要申请电子印章的印模'}
              </th>
            </tr>
            <tr>
              <td colspan="6" class="box">
                {this.isPersonSealApply ? (
                  <img src={this.seal.handWriteSealUrl} width="400" />
                ) : (
                  <div class="help-info">印模加盖区</div>
                )}
              </td>
            </tr>
          </table>
          <div class="form">
            <div>
              <div class="vh">
                <p class="label">
                  审批机构：（加盖公章）
                  <input
                    v-model={this.seal.auditOrg}
                    disabled
                    type="text"
                    class="input"
                  />
                </p>
                <span class="help-info">盖章区</span>
                <p class="date">日期：_________年______月______日</p>
              </div>
            </div>
            {this.isPersonSealApply ? null : (
              <div>
                <h2>说明</h2>
                <ul class="description-info">
                  <li>请在上方加盖印模及审批机构公章;</li>
                  <li>
                    每张申请表只支持加盖一个印模，请确认加盖的印模清晰可辨。
                  </li>
                  <li>
                    组织机构的电子法定名称章（公章）须上级主管部门审批，其他专用章（包括经济合同章、财务专用章等）应与电子法定名称章（公章）有所区别。
                  </li>
                </ul>
              </div>
            )}
          </div>
        </div>
      </div>
    )
  }

  private mounted() {
    // debugger
    this.seal = JSON.parse(
      sessionStorage.getItem('sealInfo') ||
        window.parent.sessionStorage.getItem('sealInfo') ||
        '{}'
    )
  }
}
